<template>
  <a-modal
    v-model="show"
    title="回复"
    width="800px"
    :maskClosable="false"
    @ok="handleOk"
    @cancel="handleClose"
  >
    <div class="deal-detail">
      <a-spin tip="Loading..." :spinning="loading">
        <a-form-model
          ref="ruleForm"
          :model="form"
          :rules="rules"
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
        >
          <a-form-model-item label="内容：" prop="comment">
            <a-textarea
              v-model="form.comment"
              placeholder="请输入..."
              :maxLength="300"
              :rows="6"
            />
          </a-form-model-item>
          <a-row>
            <a-col :offset="labelCol.span">
              <span class="pwd-tip">上限300个字</span>
            </a-col>
          </a-row>
        </a-form-model>
      </a-spin>
    </div>
  </a-modal>
</template>

<script>
import httpApi from "@/api/comment";
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    replyId: {
      type: [String, Number],
      default: ""
    }
  },
  data() {
    return {
      labelCol: { span: 3 },
      wrapperCol: { span: 18 },
      loading: false,
      form: {
        comment: ""
      },
      rules: {
        comment: [{ required: true, message: "请输入", trigger: "change" }]
      }
    };
  },
  computed: {
    show: {
      get() {
        return this.visible;
      },
      set(value) {
        this.$emit("update:visible", value);
      }
    }
  },
  methods: {
    handleOk() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.loading = true;
          httpApi
            .addComment({
              replyContent: this.form.comment.trim(),
              commentId: this.replyId
            })
            .then((res) => {
              this.loading = false;
              if (res.retcode === 0) {
                this.$message.success("回复成功！");
                this.handleClose();
                this.$emit("cb");
              } else {
                this.$message.error(res.msg || "回复失败！");
              }
            })
            .catch((err) => {
              this.$message.error(err.msg || "回复失败！");
              this.loading = false;
            });
        } else {
          return false;
        }
      });
    },
    handleClose() {
      this.$refs.ruleForm.resetFields();
      this.$emit("cancel");
    }
  }
};
</script>

<style lang="less" scoped>
.deal-detail .pwd-tip {
  .font-Medium(12px,rgba(0, 0, 0, 0.45),18px,400);
}
</style>
